<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <div>
        选择文件：<input type="file" id="inputFile" accept="image/*" onchange="handleChange(event)" />
        <p id="realFileType"></p>
    </div>
    <script>
        function readBuffer(file, start = 0, end = 2) {
            return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = () => {
                         resolve(reader.result);
                    };
                    reader.onerror = reject;
                    reader.readAsArrayBuffer(file.slice(start, end));
                });
        }
        function check(headers) {
                return (buffers, options = { offset: 0 }) =>
                       headers.every(
                        (header, index) => header === buffers[options.offset + index]
                );
        }
        const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); // PNG图片对应的魔数
        const realFileElement = document.querySelector("#realFileType");

        async function handleChange(event) {
                        const file = event.target.files[0];
                        const buffers = await readBuffer(file, 0, 8);
                        const uint8Array = new Uint8Array(buffers);
                        console.log('mmmmmmmmmmm')
                        console.log(file)
                        console.log(buffers)
                        console.log(uint8Array)
                        console.log('mmmmmmmmmmm')
                        realFileElement.innerText = `${file.name}文件的类型是：${
                isPNG(uint8Array) ? "image/png" : file.type
            }`;
        }
    </script>

</body>

</html>